<template>
    <div id="ClassNoticeContainer">
        <div id="headTitle">班级通知</div>
        <!--搜索区域元素块-->
        <div class="searchAndNoticeBox">
            <div class="ClassNoticeCreateBox">
                <el-input style="width: 400px" placeholder="请输入通知标题(不输入任何信息，则搜索全部通知)"
                          v-model="searchNoticeTitle"
                          clearable @clear="searchClassNotice"></el-input>
                <el-button type="primary" @click="searchClassNotice" style="margin-left: 10px">搜索</el-button>
                <el-button type="primary" @click="addNotice" style="margin-left: 10px">创建</el-button>
            </div>
            <!--通知展示表-->
            <div class="ClassNotice">
                <!--通知项目-->
                <div class="CreatedClassNotice">
                    <el-table class="noticeTable"
                              :data="noticeMessage"
                              width="450"
                              stripe border
                    >
                        <el-table-column type="expand">
                            <template #default="props">
                                <p class="noticeContent">
                                    <div class="title">通知内容</div>
                                    <div class="content">{{ props.row.noticeContent }}</div>
                                </p>
                            </template>
                        </el-table-column>
                        <el-table-column prop="claNoticeID" label="通知ID" align="center"/>
                        <el-table-column prop="noticeTitle" label="通知标题" align="center"/>
                        <el-table-column prop="releaseTime" label="发布时间" align="center"/>
                        <el-table-column label="操作" align="center">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                           @click.prevent="changeNotice(scope.$index, scope.row)">更改
                                </el-button>
                                <el-button link type="danger" size="small"
                                           @click.prevent="deleteNotice(scope.$index, scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <!--创建和修改班级通知展示框-->
        <div class="changeAndCreateBox">
            <el-dialog v-model="dialogFormVisible" title="修改通知" width="40%">
                <el-form :model="form" label-width="100px" style="padding-right: 50px">
                    <el-form-item label="通知标题：">
                        <el-input v-model="form.noticeTitle" autocomplete="off" placeholder="请输入标题"/>
                    </el-form-item>
                    <el-form-item label="通知内容：">
                        <el-input
                                v-model="form.noticeContent"
                                :autosize="{ minRows: 10, maxRows: 20 }"
                                type="textarea"
                                placeholder="请输入具体内容"
                        />
                    </el-form-item>
                </el-form>
                <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="createAndChangeNotice">确认</el-button>
          </span>
                </template>
            </el-dialog>
        </div>
        <div id="pagination">
            <el-pagination
                    v-model:current-page="classNoticePageNumber"
                    v-model:page-size="classNoticePageSize"
                    :page-sizes="[2, 5, 10, 15, 20]"
                    :small=false
                    :disabled=false
                    :background=false
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="classNoticeTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>

</template>
<script>
import "../assets/ClassNotice.css";
import prompt from "@/utils/prompt";
import request from "@/utils/requset.js";
import {reactive} from "vue";
import router from "@/router";


export default {
    name: 'classNotice',
    data() {
        return {
            noticeMessage: [],
            searchedClassNotice: [],
            form: {
                noticeTitle: "",
                noticeContent: ""
            },
            classNoticeTotal: 0,
            classNoticePageNumber: 1,
            classNoticePageSize: 2,
            dialogFormVisible: false,
            searchNoticeTitle: "",
            globalIndex: -1,
            arrayOld: 0,
            arrayNew: 0,
            classNoticeID: 0
        }
    },
    //加载已经创建的通知
    created() {
        if (this.isClassAdmin()) {
            this.searchClassNotice();
        }
    },
    methods: {
        isClassAdmin() {
            let isClassAdmin = localStorage.getItem("userInfo") ? JSON.parse(localStorage.getItem("userInfo")).isClassAdmin : "";
            if (isClassAdmin === "是") {
                return true;
            }
            prompt("非班级管理员，权限不足！", "error");

            router.push({path: "/home"});
            return false;
        },
        loadClassNoticeData() {
            //从本地数据获取token
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                return;
            }
            //利用token请求数据
            request.get(
                "/classNotice/all",
                {
                    //参数
                    params: {
                        token: token,
                    }
                }
                //处理返回结果
            ).then(result => {
                //查询班级通知失败
                if (result.code !== "200") {
                    return;
                }
                //查询班级通知成功
                this.noticeMessage = result.data.classNotice;
            })
        },
        //分页-页面数量
        handleSizeChange(classNoticePageSize) {
            this.classNoticePageSize = classNoticePageSize;
            this.searchClassNotice();
        },
        //分页-页码
        handleCurrentChange(classNoticePageNumber) {
            this.classNoticePageNumber = classNoticePageNumber;
            this.searchClassNotice();
        },
        //
        searchClassNotice() {
            //从本地数据获取token
            let token = localStorage.getItem("token") ? localStorage.getItem("token") : "";
            if (token === "") {
                return;
            }
            //利用token请求数据
            request.get(
                "/classNotice/searchClassNotice",
                {
                    params: {
                        token: token,
                        searchNoticeTitle: this.searchNoticeTitle,
                        classNoticePageSize: this.classNoticePageSize,
                        classNoticePageNumber: this.classNoticePageNumber,
                    }
                }).then(result => {
                //查询班级通知成功
                this.classNoticeTotal = result.data.classNoticeTotalNum;
                this.noticeMessage = result.data.classNotice;
            })
        },
        //创建班级时更新创建框
        addNotice() {
            this.globalIndex = -1;
            this.form = {};
            this.dialogFormVisible = true;
        },
        //创建班级通知
        createdClassNotice() {
            let token = localStorage.getItem("token");
            if (token === "") {
                prompt("还未登录！", "error");
                router.push({path: "login"});
                return;
            }
            this.form.token = token;
            request.post(
                '/classNotice/createClassNotice',
                this.form).then(result => {

                if (result.code == "200") {
                    prompt(result.message, result.type);
                } else {
                    prompt(result.message, result.type);
                }
                this.searchClassNotice();
            })
            this.dialogFormVisible = false;
        },
        //删除通知
        deleteNotice(index) {
            this.classNoticeID = this.noticeMessage[index].claNoticeID;
            request.get('/classNotice/deleteClassNotice', {
                params: {
                    classNoticeID: this.classNoticeID
                }
            }).then(result => {
                if (result.code == "200") {
                    this.noticeMessage.splice(index, 1);
                }
                prompt(result.message, result.type);
                this.searchClassNotice();
            })
        },
        //更改通知
        changeNotice(index, row) {
            this.dialogFormVisible = true;
            const newObj = Object.assign({}, row);
            this.form = reactive(newObj);
            this.globalIndex = index;
            this.classNoticeID = this.noticeMessage[this.globalIndex].claNoticeID;
        },
        //更改与创建通知
        createAndChangeNotice() {
            this.form.noticeID = this.classNoticeID;
            if (this.globalIndex != -1) {
                if ((this.form.noticeTitle.trim() === "") || (this.form.noticeContent.trim() === "")) {
                    prompt("通知标题和内容不能为空", "error")
                    return
                }
                request.post('/classNotice/changeClassNotice', this.form
                ).then(result => {
                    if (result.code === "200") {
                        this.loadClassNoticeData();
                    }
                    prompt(result.message, result.type);

                })
                this.dialogFormVisible = false;
            }
            else {
                this.createdClassNotice();
            }
        },
    }
}
</script>